<template>
  <div class="app-container">
    <el-card shadow="never" v-loading="loading">
      <el-row :gutter="5">
        <el-col :span="24" class="main-card-view">
          <el-row>
            <el-card shadow="never" class="top-search-view-card">
              <el-row>
                <el-form :inline="true" ref="searchForm" :model="searchForm" class="demo-form-inline search-view">
                  <el-form-item label="推荐单位" prop="origin">
                    <el-input v-model="searchForm.origin" placeholder=""></el-input>
                  </el-form-item>
                  <el-form-item label="专家姓名" prop="publisher">
                    <el-input v-model="searchForm.publisher" placeholder=""></el-input>
                  </el-form-item>
                  <el-form-item label="专家电话" prop="titleName">
                    <el-input v-model="searchForm.titleName" placeholder=""></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="handleSearch" class="search-button">查询</el-button>
                    <el-button type="success" @click="handleReset" class="reset-button">重置</el-button>
                    <el-button @click="batchApproval">批量审批</el-button>
                  </el-form-item>
                </el-form>
              </el-row>
            </el-card>
          </el-row>

          <el-row>
            <el-card shadow="never">
              <el-table :data="tableData" :stripe="true" style="width: 100%" @selection-change="selectionChange">
                <el-table-column type="selection" align="center" label="序号" />
                <el-table-column prop="classify" align="center" label="专家姓名" />
                <el-table-column prop="titleName" align="center" label="专家电话" width="120" />
                <el-table-column prop="organName" align="center" label="推荐单位" width="220" />
                <!-- <el-table-column prop="workUnit" align="center" label="工作单位" width="220" /> -->
                <!-- <el-table-column prop="appointmentTime" align="center" label="专业领域" width="220" /> -->
                <!-- <el-table-column prop="position" align="center" label="职称" width="120" /> -->
                <el-table-column prop="approvalStatus" align="center" label="审核状态" />
                <el-table-column prop="remarks" align="center" label="备注" />
                <el-table-column prop="createTime" align="center" label="申请时间" width="220" />
                <el-table-column prop="approvalTime" align="center" label="审核时间" width="220" />
                <el-table-column align="center" label="操作" width="500">
                  <template slot-scope="scope">
                    <div style="display: flex;justify-content: center;align-items: center;">
                    <el-button type="text" @click="showCreateDialog(scope.row)">审批</el-button>
                    <el-button type="text" @click="showReadDialog(scope.row.healthyDataPublishUid)">详情</el-button>
                    <!-- <el-button type="text" @click="exportPdf(scope.row.healthyDataPublishUid)">导出专家信息表</el-button> -->
                    <!-- <el-button type="text" @click="exportNoticePdf(scope.row.healthyDataPublishUid)">导出公示文件</el-button> -->
                    <el-button type="text" @click="getRecords(scope.row)" style="color: #f00;">审批记录</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <XPagination ref="pageInfo" :total="total" :get-data="getList" />
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog title="审批" :visible.sync="dialogVisibleRev">
      <el-form label-width="150px" ref="form" :model="form" :rules="formRules">
        <el-form-item label="审批：" prop="approvalStatus">
          <el-radio-group v-model="form.approvalStatus">
            <el-radio :label="'通过'">审批通过</el-radio>
            <el-radio :label="'驳回'">审批不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.approvalStatus === '驳回'" label="审批不通过原因：" prop="remarks">
          <el-input :autosize="{ minRows: 4, maxRows: 6 }" type="textarea" v-model="form.remarks" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
    <!--  -->
    <el-dialog title="审批" :visible.sync="batchDialog">
      <el-form label-width="150px" ref="form" :model="batchForm" :rules="formRules">
        <el-form-item label="审批：" prop="approvalStatus">
          <el-radio-group v-model="batchForm.approvalStatus">
            <el-radio :label="'通过'">审批通过</el-radio>
            <el-radio :label="'驳回'">审批不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="batchForm.approvalStatus === '驳回'" label="审批不通过原因：" prop="remarks">
          <el-input :autosize="{ minRows: 4, maxRows: 6 }" type="textarea" v-model="batchForm.remarks" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="batchSave">保存</el-button>
      </template>
    </el-dialog>

    <el-dialog title="审批记录" :visible.sync="recordsDialog" width="70%">
      <el-table :data="recordsData" :stripe="true" style="width: 100%">
        <el-table-column prop="approvalLevel" align="center" label="层级" />
        <el-table-column prop="publisher" align="center" label="专家姓名" />
        <el-table-column prop="titleName" align="center" label="专家电话" width="120"/>
        <el-table-column prop="organName" align="center" label="推荐单位" width="220" />
        <!-- <el-table-column prop="workUnit" align="center" label="工作单位" width="220" /> -->
        <!-- <el-table-column prop="appointmentTime" align="center" label="专业领域" width="220" /> -->
        <!-- <el-table-column prop="position" align="center" label="职称" width="120" /> -->
        <el-table-column prop="approvalPro" align="center" label="审批人员" />
        <el-table-column prop="approvalTime" align="center" label="审批时间" width="220" />
        <el-table-column prop="approvalStatus" align="center" label="审批状态" />
        <el-table-column prop="remarks" align="center" label="备注" />
      </el-table>
      <template slot="footer">
        <el-button type="primary" @click="recordsDialog = false">关闭</el-button>
      </template>
    </el-dialog>

<el-dialog width="60%" :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form label-width="150px" ref="formExpert" :model="formExpert" label-position="top" style="padding:10px 80px;" :disabled="this.dialogTitle==='专家信息表详情'" >
            <el-row :gutter="60">
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                      <el-input v-model="formExpert.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="个人照片" prop="personalImg">
                      <x-upload v-model="formExpert.personalImg" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex">
                      <el-select v-model="formExpert.sex" style="width: 100%;">
                        <el-option :label="'男'" value="男"></el-option>
                        <el-option :label="'女'" value="女"></el-option>
                      </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出生日期" prop="birthday" >
                        <el-date-picker style="width: 100%;" v-model="formExpert.birthday" value-format="yyyy-MM-dd">
                        </el-date-picker>
                     </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="参加工作时间" prop="serviceYears" >
                        <el-date-picker style="width: 100%;" v-model="formExpert.serviceYears" value-format="yyyy-MM-dd">
                        </el-date-picker>
                     </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="政治面貌" prop="politicalOutlook">
                        <el-input style="width: 100%;" v-model="formExpert.politicalOutlook" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="民族" prop="nation">
                        <el-input style="width: 100%;" v-model="formExpert.nation" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="职务/职称" prop="position">
                        <el-input style="width: 100%;" v-model="formExpert.position" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作单位" prop="workUnit">
                      <el-input v-model="formExpert.workUnit" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="推荐单位" prop="organName">
                      <el-input v-model="formExpert.organName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="专业领域" prop="appointmentTime">
                        <el-input v-model="formExpert.appointmentTime" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="研究方向" prop="profession">
                        <el-input v-model="formExpert.profession" />
                      </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="学位学历" prop="highestDegree">
                        <el-input v-model="formExpert.highestDegree" />
                      </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="毕业院校" prop="graduationInstitution">
                      <el-input v-model="formExpert.graduationInstitution" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="通讯地址" prop="workAddress">
                         <el-input v-model="formExpert.workAddress" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="telNum">
                      <el-input :readonly="true" v-model="formExpert.telNum" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电子邮箱" prop="email">
                      <el-input v-model="formExpert.email" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作单位科普主管部门(如党办、宣传处)" prop="departmentName">
                         <el-input v-model="formExpert.departmentName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人姓名" prop="organLevel">
                       <el-input v-model="formExpert.organLevel" />
                     </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人电话" prop="officePhone">
                       <el-input v-model="formExpert.officePhone" />
                     </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="区域" prop="expertType">
                        <el-input v-model="formExpert.expertType" />
                     </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="8">
                <el-form-item label="单位公示文件pdf" prop="noticeFile">
                    <!-- <upLoadPdfa  v-model="formExpert.noticeFile" >
                    </upLoadPdfa> -->
                    <span style="color: #01c7ab;cursor:pointer" v-if="formExpert.noticeFile" @click="downLoad(formExpert.noticeFile)">已上传(点击下载)</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专家信息表文件pdf" prop="highestEducationLevel">
                    <!-- <upLoadPdfa  v-model="formExpert.highestEducationLevel" >
                    </upLoadPdfa> -->
                    <span style="color: #01c7ab;cursor:pointer" v-if="formExpert.highestEducationLevel" @click="downLoad(formExpert.highestEducationLevel)">已上传(点击下载)</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="已盖章文件pdf" prop="tuijianFile">
                    <!-- <upLoadPdfa  v-model="formExpert.tuijianFile" >
                    </upLoadPdfa> -->
                    <span style="color: #01c7ab;cursor:pointer" v-if="formExpert.tuijianFile" @click="downLoad(formExpert.tuijianFile)">已上传(点击下载)</span>
                </el-form-item>
              </el-col>
            </el-row>
           </el-form>

    </el-dialog>

  </div>
</template>

<script>
import XPagination from "../../components/xpagination/XPagination";
import expertList from "../../components/expertList.vue";
import * as ToBeReviewed from "../../api/expertToBeReviewed"
import * as formUtils from "../../utils/formUtils";
import * as expertInfo from "../../api/expertInfo"
import upLoadPdfa from "../../components/upLoadPdfa.vue"
import XUpload from "../../components/xupload/XUpload";
export default {
  name: "list",
  components: { XPagination, expertList, upLoadPdfa, XUpload },
  data () {
    return {
      searchForm: {
        origin:'',
        publisher:'',
        titleName:'',
      },
      tableData: [],
      loading: false,
      dialogVisible: false,
      dialogVisibleRev: false,
      detailsDialog: false,
      recordsDialog: false,
      expertDialog: false,
      total: 0,
      dialogTitle: "添加角色",
      formExpert: {
      },
      form: {
      },
      formRules: {
        approvalStatus: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        remarks: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        approvalPro: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        approvalContent: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ]
      },
      detailsForm: {},
      recordsData: [],
      selectionData: [],
      batchDialog: false,
      batchForm: {},
      expertForm: {},
      userInfo: {}
    }
  },
  methods: {
      handleReset(){
          this.$refs.searchForm.resetFields();
      },
      downLoad(url){
          const a = document.createElement('a')
          a.style.display = 'none'
          url=url.replace('http:','https:')
          a.download = url
          a.href = url
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
      },

      //详情 对话框
      showReadDialog(uid){
          //查询 专家信息
          expertInfo.queryById(uid).then(res=>{
            this.formExpert=res.data.data
            this.dialogVisible = true
            this.$nextTick(() => {
            this.dialogTitle = "专家信息表详情"
            this.editStatus = "edit"
          })
          })
      },

    exportNoticePdf(uid){
        expertInfo.queryById(uid).then(response=>{
            if(response.data.code==200 && response.data.data.noticeFile){
                const a = document.createElement('a')
                a.style.display = 'none'
                if(!response.data.data.noticeFile.includes("https")){
                    response.data.data.noticeFile=response.data.data.noticeFile.replace('http','https');
                }
                a.download = response.data.data.noticeFile
                a.href = response.data.data.noticeFile
                document.body.appendChild(a)
                a.click()
                document.body.removeChild(a)
            }else{
                 this.$message.error("无pdf文件")
            }
        })
    },
    getList (pageInfo) {
      const param = {
        ...this.searchForm,
        ...pageInfo
      }
      param.status='1';//待审核
      ToBeReviewed.queryByPage(param).then(response => {
        this.tableData = response.data.data.rows
        this.total = response.data.data.total
        this.loading = false
      }).catch(error => {
        console.log(error)
      })
    },
    exportPdf(uid){
        expertInfo.queryById(uid).then(response=>{
            if(response.data.code==200 && response.data.data.highestEducationLevel){
                const a = document.createElement('a')
                a.style.display = 'none'

                if(!response.data.data.highestEducationLevel.includes("https")){
                    response.data.data.highestEducationLevel=response.data.data.highestEducationLevel.replace('http','https');
                }
                a.download = response.data.data.highestEducationLevel
                a.href = response.data.data.highestEducationLevel
                document.body.appendChild(a)
                a.click()
                document.body.removeChild(a)
            }else{
                 this.$message.error("无pdf文件")
            }
        })
    },
    handleDelete (index, data) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          uid: data.uid,
        }
        this.loading = true
        ToBeReviewed.deleteById(param).then(result => {
          this.loading = false
          this.$message.success(result.data.msg)
          this.handleSearch()
        }).catch(error => {
          this.loading = false
          console.log(error)
        })
      }).catch(() => {
        console.log('取消删除')
      });
    },
    handleSearch () {
      this.$refs.pageInfo.loadData()
    },

    //打开审批对话框
    showCreateDialog (row) {
      this.form = row
      delete this.form.createTime
      delete this.form.updateTime
      this.dialogVisibleRev = true;
      this.$nextTick(() => {
        this.dialogTitle = "审批"
      })
    },
    handleSave () {
      this.handleEdit()
    },
    handleAdd () {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return false
        }
        const param = Object.assign({}, this.form)
        formUtils.filterFormFields(param)
        ToBeReviewed.insert(param).then(result => {
          this.$message.success(result.data.msg)
          this.dialogVisible = false
          this.handleSearch()
        }).catch(error => {
          this.$message.error(error)
          console.log(error)
        })

      })
    },
    handleEdit () {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return false
        }
        const param = Object.assign({}, this.form)
        formUtils.filterFormFields(param)
        if (this.form.approvalStatus !== '专家待确认') {
          ToBeReviewed.update(param).then(result => {
            this.$message.success('确认完成')
            this.dialogVisibleRev = false
            this.handleSearch()
          }).catch(error => {
            this.$message.error(error)
            console.log(error)
          })
        } else {
          this.expertForm.approvalPro = param.approvalPro
          this.expertForm.approvalContent = param.approvalContent
          this.expertForm.approvalUid = param.approvalUid
          ToBeReviewed.insertRecord(this.expertForm).then(result => {
            this.$message.success('确认完成')
            this.dialogVisibleRev = false
            this.handleSearch()
          }).catch(error => {
            this.$message.error(error)
            console.log(error)
          })
        }
      })
    },
    showEditDialog (index, data) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.form = Object.assign({}, data)
        this.dialogTitle = "编辑角色"
        this.editStatus = "edit"
      })
    },
    queryById (uid) {
      ToBeReviewed.queryById({ uid: uid }).then(result => {
        this.detailsForm = result.data.data
        document.getElementById('real-editor-container').innerHTML = this.detailsForm.contents
        let video = document.getElementsByTagName('video')
        for (var i = 0; i < video.length; i++) {
          video[i].parentElement.style.display = 'flex'
          video[i].parentElement.style.justifyContent = 'center'
        }
      }).catch(error => {
        console.log(error)
      })
      this.detailsDialog = true
    },
    //审批记录 对话框
    getRecords (row) {
      this.recordsDialog = true
      const param = {
        healthyDataPublishUid: row.healthyDataPublishUid
      }
      ToBeReviewed.queryByPage(param).then(response => {
        this.recordsData = response.data.data.rows
      }).catch(error => {
        console.log(error)
      })
    },
    selectionChange (data) {
      this.selectionData = data
    },
    batchApproval () {
      if (this.selectionData.length < 1) {
        this.$message.error('请勾选批量操作的数据')
        return false
      }
      this.batchForm = {}
      this.batchDialog = true
    },
    batchSave () {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return false
        }
        const param = Object.assign({}, this.batchForm)
        param.uids = []
        this.selectionData.forEach(item => {
          param.uids.push(item.uid)
        })

        ToBeReviewed.batchUpdate(param).then(result => {
          this.$message.success('确认完成')
          this.batchDialog = false
          this.handleSearch()
        }).catch(error => {
          this.$message.error(error)
          console.log(error)
        })
      })
    },
    getName (msg) {
      if (this.dialogVisible) {
        this.form.approvalPro = msg.name
        this.form.approvalUid = msg.uid
      } else if (this.batchDialog) {
        this.batchForm.approvalPro = msg.name
        this.batchForm.approvalUid = msg.uid
      }
      this.expertDialog = false
    }
  },
  mounted () {
    this.userInfo = JSON.parse(localStorage.getItem('user_info'))
    this.searchForm.approvalUid = localStorage.getItem('loginUid')
    this.handleSearch()
  }
}
</script>

<style scoped lang="scss">
    /deep/ .el-button--primary{
         background-color: #FFF!important;
         border-color: #FFF!important;
         color: #409EFF!important;
    }
</style>
